import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:readmore/readmore.dart';
import 'package:travel/model/follow.dart';
import 'package:travel/model/scenic_spot.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/ui/more_text.dart';
import 'package:travel/ui/scroll_refresh_config.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';

class VideoController extends GetxController with GetTickerProviderStateMixin {
  List<String> tabs = ['关注', '名胜', '推荐'];
  late TabController tabController;

  @override
  void onInit() {
    tabController = TabController(length: tabs.length, vsync: this, initialIndex: 2);
    super.onInit();
  }

  @override
  void onClose() {
    tabController.dispose();
    super.onClose();
  }
}

class VideoPage extends GetView<VideoController> {
  const VideoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        builder: (_) {
          return defaultTabController(context);
        },
        init: Get.put(VideoController()));
  }

  Widget defaultTabController(BuildContext context) {
    return DefaultTabController(
      length: controller.tabs.length,
      child: Scaffold(
        body: tabBarView(context),
      ),
    );
  }

  Widget tabBarView(BuildContext context) {
    return TabBarView(
      controller: controller.tabController,
      children: [
        FollowInterest(tabs: controller.tabs, tabController: controller.tabController),
        ScenicSpot(tabs: controller.tabs, tabController: controller.tabController),
        VideoPlay(tabs: controller.tabs, tabController: controller.tabController)
      ],
    );
  }
}

class VideoView extends StatefulWidget {
  const VideoView({super.key});

  @override
  State<VideoView> createState() => _VideoViewState();
}

class _VideoViewState extends State<VideoView> with TickerProviderStateMixin {
  List<String> tabs = ['关注', '名胜', '推荐'];
  late TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: tabs.length, vsync: this, initialIndex: 2);
    super.initState();
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return defaultTabController(context);
  }

  Widget defaultTabController(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        body: tabBarView(context),
      ),
    );
  }

  Widget tabBarView(BuildContext context) {
    return TabBarView(
      controller: tabController,
      children: [
        FollowInterest(tabs: tabs, tabController: tabController),
        ScenicSpot(tabs: tabs, tabController: tabController),
        VideoPlay(tabs: tabs, tabController: tabController)
      ],
    );
  }
}

/// 推荐
class VideoPlay extends StatefulWidget {
  final List<String> tabs;
  final TabController tabController;

  const VideoPlay({super.key, required this.tabs, required this.tabController});

  @override
  State<VideoPlay> createState() => _VideoPlayState();
}

class _VideoPlayState extends State<VideoPlay> with TickerProviderStateMixin {
  bool isVideo = true;

  int tabIndex = 2;

  double top = 0;

  bool isFollow = false;

  bool isCollect = false;

  bool isLike = false;

  double bottom = 0;

  late PageController pageController;

  late TextEditingController textController;

  @override
  void initState() {
    textController = ToolsUtils.editingController('');
    top = Get.mediaQuery.padding.top;
    pageController = PageController();
    pageController.addListener(() {
      Get.log('index = ${pageController.page}');
    });
    super.initState();
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        PageView(
          scrollDirection: Axis.vertical,
          controller: pageController,
          children: [
            Container(
              decoration: const BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage(
                          'https://cdn7.axureshop.com/demo2024/2251242/images/推荐视频/u1967.png'))),
            ),
            Container(
              decoration: const BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage(
                          'https://cdn7.axureshop.com/demo2023/2251242/images/视频详情/u2170.png'))),
            )
          ],
        ),
        Positioned(
            top: top,
            left: 0,
            right: 0,
            child: Container(
              height: 44.h,
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 15.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 40.w,
                    alignment: Alignment.center,
                    child: CircleAvatar(
                        radius: 17.5.w,
                        backgroundColor: Colors.white,
                        child: CircleAvatar(
                          radius: 16.w,
                          backgroundImage: const NetworkImage(
                              'https://img2.baidu.com/it/u=3015492821,229192487&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'),
                        )),
                  ),
                  Expanded(
                      child: Center(
                    child: Wrap(
                      spacing: 5.w,
                      children: widget.tabs
                          .asMap()
                          .map((key, value) => MapEntry(
                              key,
                              TextButton(
                                  onPressed: () {
                                    setState(() {
                                      if (tabIndex != key) {
                                        widget.tabController.animateTo(key,
                                            duration: const Duration(milliseconds: 1000),
                                            curve: Curves.linear);
                                      }
                                    });
                                  },
                                  child: Text(
                                    value,
                                    style: activeStyle(key),
                                  ))))
                          .values
                          .toList(),
                    ),
                  )),
                  Wrap(
                    crossAxisAlignment: WrapCrossAlignment.end,
                    children: [
                      IconButton(
                          onPressed: () {
                            Get.toNamed(RoutePath.videoSearch);
                          },
                          icon: ToolsUtils.assetImageSvg('u253.svg', width: 18.w, height: 18.w)),
                      IconButton(
                          onPressed: () {
                            setState(() {
                              isVideo = !isVideo;
                            });
                          },
                          icon: ToolsUtils.assetImageSvg(isVideo ? 'u251.svg' : 'u252.svg',
                              width: 18.w, height: 18.w))
                    ],
                  )
                ],
              ),
            )),
        Positioned(
            left: 10.w,
            bottom: 10.h,
            child: SizedBox(
              width: 256.w,
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Wrap(
                      spacing: 10.w,
                      children: [
                        Container(
                          alignment: Alignment.center,
                          constraints: BoxConstraints.expand(width: 60.w, height: 30.h),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(0, 0, 0, 0.447058823529412),
                              borderRadius: BorderRadius.circular(15.h)),
                          child: Text.rich(
                            TextSpan(children: [
                              WidgetSpan(
                                  child: ToolsUtils.assetImageSvg('u276.svg',
                                      width: 12.w, height: 15.h)),
                              TextSpan(
                                  text: ' 衡阳',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color841c, fontSize: 13.sp))
                            ]),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        Container(
                          alignment: Alignment.center,
                          padding: EdgeInsets.symmetric(horizontal: 10.w),
                          constraints: BoxConstraints.expand(width: 155.w, height: 30.h),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(0, 0, 0, 0.447058823529412),
                              borderRadius: BorderRadius.circular(15.h)),
                          child: Text.rich(
                            TextSpan(children: [
                              WidgetSpan(
                                  child: ToolsUtils.assetImageSvg('u279.svg',
                                      width: 15.w, height: 13.h)),
                              TextSpan(
                                  text: ' 南岳衡山风景名胜尽在眼底中开始美好生活',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color841c, fontSize: 13.sp))
                            ]),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(vertical: 15.h),
                    alignment: Alignment.centerLeft,
                    decoration: BoxDecoration(color: ColorsUtils.rgba(255, 255, 255, 0)),
                    child: Text(
                      '@小妞爱游荡',
                      style: StylesUtils.customTextStyle(shadows: [
                        Shadow(
                            color: ColorsUtils.rgba(0, 0, 0, 0.647058823529412),
                            offset: const Offset(1, 1),
                            blurRadius: 5.0)
                      ]),
                    ),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    child: ReadMoreText(
                      '来湖南衡阳旅游必打卡的景点 #周边游安心好去处 #城市骑行记 #逛',
                      trimLines: 2,
                      trimMode: TrimMode.Line,
                      trimExpandedText: '展开',
                      trimCollapsedText: '收起',
                      moreStyle: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3478,
                        fontSize: 14.sp,
                      ),
                      lessStyle: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3478,
                        fontSize: 14.sp,
                      ),
                      style: StylesUtils.customTextStyle(),
                    ),
                  ),
                ],
              ),
            )),
        Positioned(
            right: 10.w,
            bottom: 10.h,
            child: SizedBox(
              width: 50.w,
              child: Column(
                children: [
                  SizedBox(
                    height: 50.w,
                    child: Stack(
                      clipBehavior: Clip.none,
                      children: [
                        InkWell(
                          onTap: () {
                            Get.toNamed(RoutePath.homepageOther);
                          },
                          child: CircleAvatar(
                            radius: 25.w,
                            backgroundImage: const NetworkImage(
                                'https://img0.baidu.com/it/u=2901830406,3460421538&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'),
                          ),
                        ),
                        Transform.translate(
                          offset: Offset(0, 25.h),
                          child: Center(
                            child: Container(
                              constraints: BoxConstraints.expand(width: 45.w, height: 20.h),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(colors: [
                                    ColorsUtils.rgba(52, 120, 246, 1),
                                    ColorsUtils.rgba(2, 167, 240, 1)
                                  ], stops: const [
                                    0,
                                    0.9
                                  ], transform: GradientRotation(RadianUtils.angleToRadian(90))),
                                  borderRadius: BorderRadius.circular(10.h)),
                              child: InkWell(
                                onTap: () {
                                  setState(() {
                                    isFollow = !isFollow;
                                  });
                                },
                                child: Text(
                                  isFollow ? '已关注' : '关注',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 11.sp, color: ColorsUtils.colorFfff),
                                ),
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 15.h),
                    child: Column(
                      children: [
                        InkWell(
                          onTap: () {
                            setState(() {
                              isCollect = !isCollect;
                            });
                          },
                          child: Center(
                              child: ToolsUtils.assetImageSvg(
                                  isCollect ? 'u267_selected.svg' : 'u267.svg',
                                  width: 46.w,
                                  height: 45.h)),
                        ),
                        Center(
                          child: Text(
                            '1.9万',
                            style: StylesUtils.customTextStyle(fontSize: 12.sp),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 15.h),
                    child: Column(
                      children: [
                        InkWell(
                            onTap: () {
                              setState(() {
                                isLike = !isLike;
                              });
                            },
                            child: Center(
                                child: ToolsUtils.assetImageSvg(
                                    isLike ? 'u266_selected' : 'u266.svg',
                                    width: 46.w,
                                    height: 44.h))),
                        Center(
                          child: Text(
                            '3.1万',
                            style: StylesUtils.customTextStyle(fontSize: 12.sp),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 15.h),
                    child: Column(
                      children: [
                        InkWell(
                            onTap: () {
                              ToolsUtils.openAllComment(context,
                                  controller: textController, onSubmitted: (String text) {});
                            },
                            child: Center(
                                child: ToolsUtils.assetImageSvg('u268.svg',
                                    width: 46.w, height: 44.h))),
                        Center(
                          child: Text(
                            '1490',
                            style: StylesUtils.customTextStyle(fontSize: 12.sp),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 15.h),
                    child: Column(
                      children: [
                        InkWell(
                          onTap: () {
                            ToolsUtils.openShare(context);
                          },
                          child: Center(
                              child:
                                  ToolsUtils.assetImageSvg('u269.svg', width: 46.w, height: 44.h)),
                        ),
                        Center(
                          child: Text(
                            '357',
                            style: StylesUtils.customTextStyle(fontSize: 12.sp),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            )),
      ],
    );
  }

  TextStyle activeStyle(int index) {
    if (index == tabIndex) {
      return StylesUtils.customTextStyle(fontSize: 16.sp, shadows: [
        Shadow(
            offset: Offset.zero,
            blurRadius: 0.0,
            color: ColorsUtils.rgba(255, 255, 255, 0.933333333333333))
      ]);
    }
    return StylesUtils.textStyle(color: ColorsUtils.rgba(255, 255, 255, 0.6), fontSize: 16.sp);
  }
}

/// 关注
class FollowInterest extends StatefulWidget {
  final List<String> tabs;
  final TabController tabController;

  const FollowInterest({super.key, required this.tabs, required this.tabController});

  @override
  State<FollowInterest> createState() => _FollowInterestState();
}

class _FollowInterestState extends State<FollowInterest> {
  int tabIndex = 0;

  bool isVideo = true;

  RefreshController refreshController = RefreshController();

  List<FollowVideoModel> pageList = [];

  @override
  void initState() {
    initData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
      appBar: AppBar(
        backgroundColor: Colors.white,
        leadingWidth: 50.w,
        leading: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 17.5.w,
            child: CircleAvatar(
              radius: 16.w,
              backgroundImage: const NetworkImage(
                  'https://img2.baidu.com/it/u=3015492821,229192487&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'),
            )),
        automaticallyImplyLeading: false,
        title: Center(
          child: Wrap(
            spacing: 5.w,
            children: widget.tabs
                .asMap()
                .map((key, value) => MapEntry(
                    key,
                    TextButton(
                        onPressed: () {
                          setState(() {
                            if (key != tabIndex) {
                              widget.tabController.animateTo(key,
                                  duration: const Duration(milliseconds: 1000),
                                  curve: Curves.linear);
                            }
                          });
                        },
                        child: Text(
                          value,
                          style: activeStyle(key),
                        ))))
                .values
                .toList(),
          ),
        ),
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        actions: [
          IconButton(
              onPressed: () {
                Get.toNamed(RoutePath.videoSearch);
              },
              icon: ToolsUtils.assetImageSvg('u2029.svg', width: 18.w, height: 18.w)),
          IconButton(
              onPressed: () {
                setState(() {
                  isVideo = !isVideo;
                });
              },
              icon: ToolsUtils.assetImageSvg(isVideo ? 'u2027.svg' : 'u2028.svg',
                  width: 18.w, height: 18.w))
        ],
      ),
      body: scrollRefreshConfig(context),
    );
  }

  initData() {
    pageList.add(FollowVideoModel(
      avatar:
          'https://img2.baidu.com/it/u=933399434,4184962118&fm=253&fmt=auto&app=138&f=JPEG?w=517&h=500',
      nickname: '小妞爱游荡',
      videoUrl:
          'https://img2.baidu.com/it/u=1221576643,621976655&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
      publishTime: '1天前',
      introduce: '来湖南衡阳旅游必打卡的景点 #周边游安心好去处 #城市骑行记 #逛展大搜罗 #休闲好去处…',
      address: '湖南',
    ));
    pageList.add(FollowVideoModel(
      avatar:
          'https://img2.baidu.com/it/u=933399434,4184962118&fm=253&fmt=auto&app=138&f=JPEG?w=517&h=500',
      nickname: '小妞爱游荡',
      videoUrl:
          'https://img2.baidu.com/it/u=100604233,212882188&fm=253&fmt=auto&app=138&f=JPEG?w=763&h=500',
      publishTime: '1天前',
      introduce: '来湖南衡阳旅游必打卡的景点 #周边游安心好去处 #城市骑行记 #逛展大搜罗 #休闲好去处…',
      address: '湖南',
    ));
  }

  ScrollRefreshConfig scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: refreshController,
      onRefresh: onRefresh,
      onLoading: onLoading,
      child: listViewBuilder(context),
    );
  }

  Future<void> onRefresh() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));
    refreshController.refreshCompleted(resetFooterState: true);
  }

  Future<void> onLoading() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));

    /// if failed, use loadFailed(), if no data return, use LoadNodata()
    if (pageList.length > 20) {
      return refreshController.loadNoData();
    }

    setState(() {
      /// 添加数据
      initData();
    });

    /// 完毕
    refreshController.loadComplete();
  }

  ListView listViewBuilder(BuildContext context) {
    double pad = (Get.width - 345) / 2;
    double mid = (345 - 36) / 2;
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: pad),
      itemBuilder: (_, index) {
        var row = pageList[index];
        return Container(
          margin: EdgeInsets.only(top: 20.h),
          child: Column(
            children: [
              InkWell(
                onTap: () {
                  Get.toNamed(RoutePath.videoInfo);
                },
                child: Stack(
                  children: [
                    Container(
                      width: 345,
                      height: 345,
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              image: NetworkImage(row.videoUrl),
                              alignment: Alignment.topLeft,
                              fit: BoxFit.cover),
                          borderRadius: BorderRadius.circular(10.w)),
                    ),
                    Positioned(
                      top: mid,
                      left: mid,
                      width: 36,
                      height: 36,
                      child: Center(
                        child: ToolsUtils.assetImageSvg('u2107.svg', width: 36, height: 36),
                      ),
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 20.h),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: 45,
                      height: 45,
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              image: NetworkImage(
                                row.avatar,
                              ),
                              alignment: Alignment.topLeft,
                              fit: BoxFit.cover),
                          borderRadius: BorderRadius.circular(8.w)),
                    ),
                    Expanded(
                        child: Container(
                      padding: EdgeInsets.only(left: 10.w),
                      child: Column(
                        children: [
                          Container(
                            alignment: Alignment.topLeft,
                            child: Text(
                              row.nickname,
                              style: StylesUtils.customTextStyle(
                                  fontWeight: FontWeight.w700, color: ColorsUtils.color0000),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 8.w),
                            alignment: Alignment.bottomLeft,
                            child: Text(
                              '${row.publishTime}  •  发布于${row.address}',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color9999, fontSize: 12.sp),
                            ),
                          )
                        ],
                      ),
                    )),
                    Center(
                      child: ToolsUtils.assetImageSvg('u2109.svg', width: 15.w, height: 4.h),
                    )
                  ],
                ),
              ),
              Container(
                  margin: EdgeInsets.only(top: 20.h),
                  alignment: Alignment.centerLeft,
                  child: MoreRichText(
                    text: row.introduce,
                    minLines: 2,
                    maxLines: 1000,
                    textStyle: StylesUtils.customTextStyle(
                        fontSize: 15.sp, color: ColorsUtils.color5555, lineHeight: 1.2.h),
                  ))
            ],
          ),
        );
      },
      itemCount: pageList.length,
    );
  }

  TextStyle activeStyle(int index) {
    if (index == tabIndex) {
      return StylesUtils.customTextStyle(fontSize: 16.sp, color: ColorsUtils.color0000);
    }
    return StylesUtils.customTextStyle(fontSize: 16.sp, color: ColorsUtils.color9999);
  }
}

/// 名胜
class ScenicSpot extends StatefulWidget {
  final List<String> tabs;
  final TabController tabController;

  const ScenicSpot({super.key, required this.tabs, required this.tabController});

  @override
  State<ScenicSpot> createState() => _ScenicSpotState();
}

class _ScenicSpotState extends State<ScenicSpot> {
  int tabIndex = 1;

  bool isVideo = true;

  bool isLoading = false;

  bool hasNext = true;

  int total = 90;

  List<ScenicSpotModel> pageList = [];

  late ScrollController scrollController;

  @override
  void initState() {
    initData();
    scrollController = ScrollController()
      ..addListener(() {
        Get.log(
            'maxScroll = ${scrollController.position.maxScrollExtent} \tscroll = ${scrollController.position.pixels} \toffset = ${scrollController.offset}');
        if (isLoading == false &&
            scrollController.position.pixels >= scrollController.position.maxScrollExtent) {
          setState(() {
            isLoading = true;
          });
          loadMoreData();
        }
      });
    super.initState();
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
      appBar: AppBar(
        backgroundColor: Colors.white,
        leadingWidth: 50.w,
        leading: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 17.5.w,
            child: CircleAvatar(
              radius: 16.w,
              backgroundImage: const NetworkImage(
                  'https://img2.baidu.com/it/u=3015492821,229192487&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'),
            )),
        automaticallyImplyLeading: false,
        title: Center(
          child: Wrap(
            spacing: 5.w,
            children: widget.tabs
                .asMap()
                .map((key, value) => MapEntry(
                    key,
                    TextButton(
                        onPressed: () {
                          setState(() {
                            if (key != tabIndex) {
                              widget.tabController.animateTo(key,
                                  duration: const Duration(milliseconds: 1000),
                                  curve: Curves.linear);
                            }
                          });
                        },
                        child: Text(
                          value,
                          style: activeStyle(key),
                        ))))
                .values
                .toList(),
          ),
        ),
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        actions: [
          IconButton(
              onPressed: () {
                Get.toNamed(RoutePath.videoSearch);
              },
              icon: ToolsUtils.assetImageSvg('u2029.svg', width: 18.w, height: 18.w)),
          IconButton(
              onPressed: () {
                setState(() {
                  isVideo = !isVideo;
                });
              },
              icon: ToolsUtils.assetImageSvg(isVideo ? 'u2027.svg' : 'u2028.svg',
                  width: 18.w, height: 18.w))
        ],
        bottom: PreferredSize(
            preferredSize: const Size.fromHeight(40),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 15.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '名胜景点',
                    style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                  ),
                  TextButton(
                      onPressed: () {
                        setState(() {
                          isLoading = true;
                          scrollController
                              .animateTo(0,
                                  duration: const Duration(milliseconds: 1000),
                                  curve: Curves.linear)
                              .then((value) {
                            isLoading = false;
                            pageList.clear();
                            initData();
                          });
                        });
                      },
                      child: Text.rich(TextSpan(children: [
                        WidgetSpan(
                            child: ToolsUtils.assetImageSvg('u2052.svg', width: 10.w, height: 10.h),
                            alignment: PlaceholderAlignment.middle),
                        TextSpan(
                            text: ' 换一批',
                            style: StylesUtils.customTextStyle(
                                fontSize: 12.sp, color: ColorsUtils.color9999))
                      ])))
                ],
              ),
            )),
      ),
      body: SingleChildScrollView(
        controller: scrollController,
        physics: const AlwaysScrollableScrollPhysics(),
        padding: EdgeInsets.symmetric(horizontal: 15.w),
        child: Column(
          children: [
            StaggeredGrid.count(
              crossAxisCount: 3,
              mainAxisSpacing: 15.w,
              crossAxisSpacing: 5.w,
              children: pageList
                  .map((row) => InkWell(
                        onTap: () {
                          Get.toNamed(RoutePath.videoInfo);
                        },
                        child: Column(
                          children: [
                            Container(
                              width: 115,
                              height: 125,
                              decoration: BoxDecoration(
                                  image: DecorationImage(
                                      image: NetworkImage(row.imgUrl),
                                      alignment: Alignment.topLeft,
                                      fit: BoxFit.fill),
                                  borderRadius: BorderRadius.only(
                                      topRight: Radius.circular(5.w),
                                      topLeft: Radius.circular(5.w))),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 10.h, bottom: 10.h),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                row.name,
                                style: StylesUtils.customTextStyle(
                                    fontSize: 12.sp, color: ColorsUtils.color0000),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Text(
                                  '热度 ',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 13.sp, color: ColorsUtils.color3333),
                                ),
                                Wrap(
                                  spacing: 5.w,
                                  children: getHotIcon(row.hot),
                                )
                              ],
                            ),
                          ],
                        ),
                      ))
                  .toList(),
            ),
            renderBottom(),
          ],
        ),
      ),
    );
  }

  TextStyle activeStyle(int index) {
    if (index == tabIndex) {
      return StylesUtils.customTextStyle(fontSize: 16.sp, color: ColorsUtils.color0000);
    }
    return StylesUtils.customTextStyle(fontSize: 16.sp, color: ColorsUtils.color9999);
  }

  List<Widget> getHotIcon(int hot) {
    List<Widget> hots = [];
    for (var i = 0; i < hot; i++) {
      hots.add(ToolsUtils.assetImageSvg('u2061.svg', width: 8.w, height: 10.h));
    }
    return hots;
  }

  void initData() {
    var r = Random();
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img2.baidu.com/it/u=2643620748,760491344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
      name: '南岳衡山',
      hot: r.nextInt(5),
    ));
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img0.baidu.com/it/u=2744771578,1807129846&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      name: '北京故宫',
      hot: r.nextInt(5),
    ));
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img1.baidu.com/it/u=2548447229,1109258633&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500',
      name: '长城八达岭',
      hot: r.nextInt(5),
    ));

    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img2.baidu.com/it/u=4209099776,370291904&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
      name: '上海迪士尼度假区',
      hot: r.nextInt(5),
    ));
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img1.baidu.com/it/u=1703981092,3218987972&fm=253&fmt=auto&app=120&f=JPEG?w=1208&h=800',
      name: '澳门三巴牌坊',
      hot: r.nextInt(5),
    ));
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img1.baidu.com/it/u=919393532,2049877243&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
      name: '长隆欢乐世界',
      hot: r.nextInt(5),
    ));

    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img0.baidu.com/it/u=908825911,2120646380&fm=253&fmt=auto&app=138&f=JPEG?w=607&h=334',
      name: '南京夫子庙',
      hot: r.nextInt(5),
    ));
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img2.baidu.com/it/u=420101497,1683884934&fm=253&fmt=auto&app=138&f=JPEG?w=784&h=500',
      name: '九寨沟',
      hot: r.nextInt(5),
    ));
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img0.baidu.com/it/u=2622249467,1972761184&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700',
      name: '秦始皇帝陵博物馆',
      hot: r.nextInt(5),
    ));

    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img0.baidu.com/it/u=908825911,2120646380&fm=253&fmt=auto&app=138&f=JPEG?w=607&h=334',
      name: '南京夫子庙',
      hot: r.nextInt(5),
    ));
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img2.baidu.com/it/u=420101497,1683884934&fm=253&fmt=auto&app=138&f=JPEG?w=784&h=500',
      name: '九寨沟',
      hot: r.nextInt(5),
    ));
    pageList.add(ScenicSpotModel(
      imgUrl:
          'https://img0.baidu.com/it/u=2622249467,1972761184&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700',
      name: '秦始皇帝陵博物馆',
      hot: r.nextInt(5),
    ));
  }

  Future<void> loadMoreData() {
    return Future.delayed(const Duration(seconds: 1), () {
      setState(() {
        if (total > pageList.length) {
          hasNext = true;
          isLoading = false;
          initData();
          return;
        }
        hasNext = false;
        isLoading = false;
      });
    });
  }

  Widget renderBottom() {
    if (hasNext == false) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        alignment: Alignment.center,
        child: const Text(
          '已经到底',
          style: TextStyle(
            fontSize: 15,
            color: Color(0xFF333333),
          ),
        ),
      );
    }
    if (isLoading == true) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '努力加载中...',
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF333333),
              ),
            ),
            const Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(
                strokeWidth: 3,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3478),
              ),
            ),
          ],
        ),
      );
    }
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      child: const Text(
        '上拉加载更多',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    );
  }
}
